<route>
    {
        meta: {
            enabled: false
        }
    }
</route>

<script setup>
import useFileStore from '@/store/modules/file'
import { ElMessageBox } from 'element-plus'

const route = useRoute()
const fileStore = useFileStore()
const searchMore = ref(false)
const total = ref(0)
const selectId = ref(0);
const tagsList = ref([]);
const fileId = ref(route.query.fileId)
const checkShow = ref(false);
const infoShow = ref(true);
const videoShow = ref(false);
const videoBaseUrl = ref("https://merz.jxey.com:11443/api");
const videoUrl = ref("");

const search = ref({
    personName: '',
    areaName: '',
    bedID: ''
})
const checkForm = ref({
    content: "",
    fileId: ""
})
const infoForm = ref({});
const dataList = ref([])

onMounted(() => {
    videoBaseUrl.value = location.href.split("#")[0] + 'api'
    getList()
    infoForm.value = localStorage.getItem("INFO_FORM") ? JSON.parse(localStorage.getItem("INFO_FORM")) : {}
})

function getList() {
    fileStore.shareTags(fileId.value).then(res => {
        tagsList.value = res
        selectTag({id: 0})
        total.value = res.length
    })

}

function handleFilter() {
    getList()
}

function selectTag(k) {
    if(selectId.value == k.id) {
        selectId.value = ""
    } else {
        selectId.value = k.id
    }
    fileStore.shareVideos(fileId.value, selectId.value).then(res => {
        dataList.value = res
        dataList.value.forEach(item => {
            item.videoShow = false
        })
    })
}

function getCheck(val) {
    checkShow.value = true
    checkForm.value = {
        fileId: val.id,
        content: ""
    }
}

function submitCheck() {
    checkShow.value = false
}

function submitInfo() {
    if(!infoForm.value.userName) {
        ElMessage({
            type: 'error',
            message: '请输入用户姓名'
        })
        return
    }
    if(!infoForm.value.areaName) {
        ElMessage({
            type: 'error',
            message: '请输入区域名称'
        })
        return
    }
    if(!infoForm.value.bedID) {
        ElMessage({
            type: 'error',
            message: '请输入床位ID'
        })
        return
    }
    localStorage.setItem("INFO_FORM", JSON.stringify(infoForm.value))
    infoShow.value = false
}

function initVideo(val, index) {
    dataList.value[index].videoShow = true
    videoUrl.value = `${videoBaseUrl.value}/files/public-share/${val.id}/media-stream?userName=${infoForm.value.userName}&areaName=${infoForm.value.areaName}&bedID=${infoForm.value.bedID}`
    // fileStore.shareMedia(val.id, infoForm.value).thenm(res => {})
    // https://merz.jxey.com:11443/#/publicize_example/qrCode?fileId=7
}
</script>

<template>
    <div>
        <page-header title="宣传资料播放">
            <template #content>
                <p>扫描二维码</p>
            </template>
        </page-header>

        <page-main>
            <search-bar @toggle="searchMore = $event">
                标签管理
                <el-row :gutter="24">
                    <el-col>
                        <div class="card-d" :class="selectId == item.id ? 'sel' : ''" v-for="(item, index) in tagsList" @click="selectTag(item)">
                            <div>{{ item.name }}</div>
                        </div>
                    </el-col>
                </el-row>
            </search-bar>
            <div v-for="(item, index) in dataList">
                <el-row>
                    <el-col :span="16">
                        <span>{{ item.name }}</span>
                    </el-col>
                    <el-col :span="8" style="text-align: right;">
                        <el-button type="primary" @click="getCheck(item)">反馈</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <div v-if="!item.videoShow" class="videos" @click="initVideo(item, index)"></div>
                    <div v-else style="text-align: center;">
                        <video controls>
                            <source :src="videoUrl" type="video/mp4">
                        </video>                
                    </div>
                </el-row>
            </div>
        </page-main>

        <el-dialog v-model="infoShow" width="300px" title="扫描二维码" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
            <el-form v-model="infoForm">
                <el-form-item label="用户姓名" prop="userName">
                    <el-input v-model="infoForm.userName" placeholder="用户姓名"></el-input>
                </el-form-item>
                <el-form-item label="区域名称" prop="areaName">
                    <el-input v-model="infoForm.areaName" placeholder="区域名称"></el-input>
                </el-form-item>
                <el-form-item label="床位ID" prop="bedID">
                    <el-input v-model="infoForm.bedID" placeholder="床位ID"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="submitInfo" type="primary">提交</el-button>
                </span>
            </template>
        </el-dialog>

        <el-dialog v-model="checkShow" width="300px" title="视频反馈">
            <el-form v-model="checkForm">
                <el-form-item label="反馈内容" prop="content">
                    <el-input v-model="checkForm.content" placeholder="视频反馈内容" type="textarea" :rows="4"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="submitCheck" type="primary">提交</el-button>
                </span>
            </template>
        </el-dialog>

        <el-dialog v-model="videoShow" width="80%">
            <div style="text-align: center;">
                <video width="600" controls>
                    <source :src="videoUrl" type="video/mp4">
                </video>                
            </div>
        </el-dialog>
    </div>
</template>

<style scoped>
.test {
    width: 6px;
    height: 6px;
    background: #52c41a;
    border-radius: 10px;
    opacity: 1;
    margin: auto 5px;
}
a {
    text-decoration: none;
}
.router-link-active {
    text-decoration: none;
}
.card-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}
.card-d {
    margin-bottom: 10px;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    border: 2px solid rgb(14, 165, 233);
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    display: inline-block;
    margin: 5px 10px;
}
.card-d div {
    line-height: 32px;
}
.sel {
    background: rgba(14, 165, 233, 0.2);
}
.videos {
    cursor: pointer;
    height: 200px;
    width: 100%;
    text-align: center;
    background-color: #000;
    margin: 10px 0;
}
</style>
